<template>
    <div>
        <el-upload
            :style="uploadStyle"
            action=""
            :class="['cm-affix', {'is-disabled': inputDisabled}]"
            :disabled="inputDisabled"
            :multiple=true
            :http-request="handleUpload"
            :file-list="fileList"
            :accept="accpet"
            :show-file-list=false
            :before-upload="handleBeforeUpload"
        >
            <el-button id="affix1" v-if="inputDisabled !== true" :disabled="notupload" size="small" type="primary">点击上传</el-button>
            <el-button
                    id="affix2"
                    size="small"
                    v-if="this.affixId !== null && this.affixId !== '' && this.fileList.length > 0"
                    @click.stop="downloadPack()">
                    <div  v-if="downloading" class="el-icon-loading file-upload" style="margin-left: 0px;margin-right: 3px;font-size: 14px;"></div>
                    打包下载
            </el-button>
        </el-upload>

        <div v-for="(item, index) in fileList" class="file" :key="index">
            <div class="file-item" :class="[{'is-disabled': inputDisabled}]">
                <div class="file-name">{{item.name}}</div>
                <div v-if="item.status===1" class="el-icon-loading file-upload" title="上传中..."></div>
                <div v-if="item.status===2" class="el-icon-download file-download" title="下载" @click="downloadFile(item)"></div>
                <div v-if="item.status===2" class="el-icon-delete file-delete" title="删除" @click="deleteFile(item)"></div>
                <div v-if="isImageURL(item.name) && item.status === 2"   class="el-icon-picture" title="预览" @click="preview(item)"></div>
                
                  
                
            </div>
        </div>
        <el-image class="preview" ref="preview"
            :src="hiddenSrc"
            :preview-src-list="previewList"
            v-show="false"
            >
        </el-image>
                
    </div>
</template>

<script>
import {upload,download,queryAffixs,deleteAffix,downloadAll } from "@/api/affix/affix"

export default {
    name: 'CmAffix',
    inject: {
        elForm: {
            default: ''
        }
    },
    data() {
        return {
            uploadCnt: 0,
            affixId: '',
            fileList: [],
            downloading:false,//控制打包下载loading动画
            baseurl: process.env.VUE_APP_BASE_API ,
            hiddenSrc:"",
            previewList:[],
        }
    },
    props: {
        notupload:{
          type:Boolean,
          default:false
        },
        value: String, // 父组件值
        disabled: Boolean,
        maxSize:{
          type: Number,
          default: 100
        },
        accpet:{
            type:String,
            default:"*"
        },
        uploadStyle:
            {
                type: String,
                default: ''
            },


    },
    computed: {
        inputDisabled() {
            return this.disabled || (this.elForm || {}).disabled;
        }
    },
    watch: {
        // 父组件值监听事件
        value: {
            handler: function(newVal/*, oldVal*/) {
                if (newVal === undefined || newVal == null || newVal === ''
                        || this.affixId === undefined || this.affixId == null || this.affixId === ''
                        || newVal !== this.affixId) {
                    this.loadData();
                }
            }
        }
    },
    methods: {
        // 预览
        preview(item){
            this.hiddenSrc = item.savePath;
   
            this.$refs.preview.showViewer = true;
        },
        isImageURL(url) {
            // let imgRegex = /(\jpg|\jpeg|\png|\gif|\webp)$/i;
            const regex = /(\jpg|\jpeg|\png|\gif|\webp)$/i;
            return regex.test(url);
        },
        handleUpload(file) {

           upload({'file': file.file, 'affixId': this.affixId}).then(res => {
                this.uploadCnt--;

                if (res.code == 200) {
                    for (let i = 0; i < this.fileList.length; i++) {
                       let item = this.fileList[i];
                        console.log(res.savePath);
                       if(item.name == res.trueName && item.status == 1){

                              this.fileList[i].id = res.id;
                              this.fileList[i].status = 2;
                              this.fileList[i].savePath = this.baseurl  + res.savePath;
                                if(this.isImageURL(res.savePath)){
                                         this.previewList.push( this.fileList[i].savePath);
                                }
                            //   this.fileList[i].savePaths =[this.baseurl + res.savePath];
                       
                            
                       }
                       
                    }


                } else {
                    this.$message.error(res.message);
                }
            }).catch(() => {
                this.uploadCnt--;
            });
        },
        handleBeforeUpload(file) {

            if (this.affixId == null || this.affixId === '') {
                this.affixId = this.$tool.uuid();
                this.$emit('input', this.affixId);
            }

            let isLt100M = file.size / 1024 / 1024 < this.maxSize;
            if (!isLt100M) {
                this.$message.error("上传大小不能超过 "+this.maxSize+"MB!");
            } else {
                this.fileList.push({name: file.name, status: 1});
                this.uploadCnt++;
            }

            return isLt100M;
        },
        getFileName(id){
            for (let i = 0; i < this.fileList.length; i++) {
                let item = this.fileList[i];

                if(item.id == id){
                    console.log(item);
                   return item.name;
                }
            }
        },
        downloadFile(file) {
            download(file.id).then((res) => {
                console.log(res)
                let fileName = this.getFileName(file.id).replace(/"/g, '');
                var blob = new Blob([res], {type: 'application/octet-stream;'})
                var downloadElement = document.createElement('a');
                var href = window.URL.createObjectURL(blob); // 创建下载的链接
                downloadElement.href = href;
                downloadElement.download = decodeURI(fileName); // 下载后文件名
                document.body.appendChild(downloadElement);
                downloadElement.click(); // 点击下载
                document.body.removeChild(downloadElement); // 下载完成移除元素
                window.URL.revokeObjectURL(href); // 释放掉blob对象
            }).catch((res) => {
                this.$message.error(res.message);
            });
        },
        downloadPack() {

            if (this.affixId === null || this.affixId === '') {
                this.$message.error("暂无附件！");
                return;
            }
            //如果只有一个文件就不打包下载
            if(this.fileList.length == 1){

                this.downloadFile(this.fileList[0]);
            }else{
                 this.downloading = true;
                downloadAll(this.affixId).then((res) => {
                    var blob = new Blob([res], {type: 'application/octet-stream'})
                    var downloadElement = document.createElement('a');
                    var href = window.URL.createObjectURL(blob); // 创建下载的链接
                    downloadElement.href = href;
                    downloadElement.download = decodeURI("download.zip"); // 下载后文件名
                    document.body.appendChild(downloadElement);
                    downloadElement.click(); // 点击下载
                    document.body.removeChild(downloadElement); // 下载完成移除元素
                    window.URL.revokeObjectURL(href); // 释放掉blob对象
                    this.downloading = false;
                }).catch(() => {
                    this.downloading = false;
                });
            }


        },
        deleteFile(file) {
            this.$confirm('请确认是否删除此文件？', '提示', {type: 'info'}).then(() => {
               deleteAffix(file.id).then((res) => {
                    if (res.code == 200) {
                        this.fileList = this.fileList.filter(item => item.id !== file.id);
                        this.previewList = this.previewList.filter(item => item !== file.savePath);//删除图片
                        if(this.fileList.length == 0){
                             this.affixId = '';
                        }
                    } else {
                        this.$message.error(res.message);
                    }
                });
            });
        },
        loadData() {
            this.fileList = [];
            if (typeof this.value !== "undefined" && this.value !== null && this.value !== "") {
                queryAffixs(this.value).then((res) => {
                    if (res.code ==200) {
                        if(res.data.length > 0){
                            this.affixId = this.value;
                            for (var i=0;i<res.data.length;i++) {
                                if(this.isImageURL(res.data[i].savePath)){
                                    this.previewList.push(this.baseurl+ res.data[i].savePath);
                                }
                                this.fileList.push({name: res.data[i].trueName, id: res.data[i].id, status: 2,savePath:this.baseurl+ res.data[i].savePath});
                            }
                        } else {
                            this.affixId = '';
                        }

                    } else {
                        this.$message.error(res.msg);
                    }
                }).catch((res) => {
                    this.editLoading = false
                    this.$message.error(res.message);
                });
            } else {
                this.affixId = '';
            }
        },
        clearData() {
            this.affixId = '';
            this.fileList = [];
        }
    },
    created() {
        this.loadData();
    }
}
</script>

<style scoped>
.cm-affix >>>.el-upload{
    padding: 0px 10px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 10px;
}
    .file {
        width: 100%;
    }
    .file-item {
        
        white-space: nowrap;
        display: flex;
        justify-content: start;
        align-items: center;
        gap: 8px;
    }
    .file-item div {
        display: inline-block;
        white-space: nowrap;
    }
    .file-upload {
        font-size: 18px;
        margin-left: 5px;
    }
    .file-download, .file-delete{
        font-size: 18px;
        cursor: pointer;
     
    }
    .file-download:hover, .file-delete:hover {
        color: #409EFF;
    }
    .file-item[class~=is-disabled] .file-delete {
        display: none;
    }
    .download-pack:hover {
        background: #409eff;
        border-color: #3999a8;
        color: #fafbfd;
    }
    .preview .file-preview{
       
       font-size: 19px;
        cursor: pointer;

 
    }
  
    .preview >>>.el-image__inner{
        
        width: 18px;
        height: 18px;
      
    }
</style>
